<script>
import { getDeliverySizes, getDeliveryVehicles, getCarPies } from '@/api/publish'
import { request } from '@/utils/request.js'



export default {
	props: {
		show: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			// 0不限 1其他 2汽运 3空运 4海运 5铁路
			deliveryType: {
				"buxian": 0,
				"qita": 1,
				"qiyun": 2,
				"kongyun": 3,
				"haiyun": 4,
				"tielu": 5
			},
			carPies: [], // 车皮列表
			selectedPies: "",//选中的车皮
			carLengths: [], // 车长列表
			selectedLength: '', // 选中的车长
			vehicleTypes: [], // 车型列表
			selectedType: '', // 选中的车型
			loading: false
		}
	},
	watch: {
		"$store.state.publishCommonBody.transport_way": {
			async handler(newVal) {
				await this.getCarLengths()
				await this.getVehicleTypes()
				await this.getCarPies()
				this.selectedPies = ""
				this.selectedLength = ""
				this.selectedType = ""
			}
		}
	},
	async created() {
		uni.showLoading({
			title: '加载中'
		});
		await Promise.all([
			this.getCarLengths(),
			this.getVehicleTypes(),
			this.getCarPies()
		])
		uni.hideLoading()
	},
	methods: {
		back() {
			// uni.navigateBack()
			this.cback()
		},

		//获取车皮列表
		async getCarPies() {
			try {
				const res = await getCarPies()
				if (res.data.code === 200) {
					this.carPies = res.data.data.data
				} else {
					uni.showToast({
						title: res.data.msg || this.$t('获取车皮列表失败'),
						icon: 'none'
					})
				}

			} catch (error) {
				console.log(error)
				uni.showToast({
					title: this.$t('获取车皮列表失败'),
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},
		// 获取车长列表
		async getCarLengths() {
			try {
				this.loading = true
				const res = await getDeliverySizes(this.$store.state.publishCommonBody.transport_way)
				if (res.data.code === 200) {
					this.carLengths = res.data.data.data
				} else {
					uni.showToast({
						title: res.data.msg || this.$t('获取车长列表失败'),
						icon: 'none'
					})
				}
			} catch (e) {
				console.log(e)
				uni.showToast({
					title: this.$t('获取车长列表失败'),
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},

		// 获取车型列表
		async getVehicleTypes() {
			try {
				const res = await getDeliveryVehicles(this.$store.state.publishCommonBody.transport_way)
				if (res.data.code === 200) {
					this.vehicleTypes = res.data.data.data
				} else {
					uni.showToast({
						title: res.data.msg || this.$t('获取车型列表失败'),
						icon: 'none'
					})
				}
			} catch (e) {
				console.log(e)
				uni.showToast({
					title: this.$t('获取车型列表失败'),
					icon: 'none'
				})
			}
		},

		// 选择车长时获取关联车型
		async getRelatedVehicles(size_id) {
			try {
				const res = await request({
					url: '/index/size_vehicle',
					method: 'post',
					data: { size_id, vehicle_id: "", transport_way: this.$store.state.publishCommonBody.transport_way }
				})

				if (res.data.code === 200) {
					this.vehicleTypes = [...res.data.data.data]

					// 如果当前选中的车型不在新列表中，清除选择
					if (this.selectedType && !this.vehicleTypes.find(item => item.id === this.selectedType.id)) {
						this.selectedType = {}
					}
				} else {
					uni.showToast({
						title: res.data.msg || this.$t('获取车型列表失败'),
						icon: 'none'
					})
				}
			} catch (e) {
				console.log(e)
				uni.showToast({
					title: this.$t('获取车型列表失败'),
					icon: 'none'
				})
			}
		},

		// 选择车型时获取关联车长
		async getRelatedSizes(vehicle_id) {
			try {
				const res = await request({
					url: '/index/size_vehicle',
					method: 'post',
					data: { vehicle_id, size_id: "", transport_way: this.$store.state.publishCommonBody.transport_way }
				})
				if (res.data.code === 200) {
					this.carLengths = res.data.data.data
					// 如果当前选中的车长不在新列表中，清除选择
					if (this.selectedLength && !this.carLengths.find(item => item.id === this.selectedLength.id)) {
						this.selectedLength = {}
					}
				} else {
					uni.showToast({
						title: res.data.msg || this.$t('获取车长列表失败'),
						icon: 'none'
					})
				}
			} catch (e) {
				console.log(e)
				uni.showToast({
					title: this.$t('获取车长列表失败'),
					icon: 'none'
				})
			}
		},

		// {{$t('选择')}}{{$t('车长')}}
		async selectLength(length) {
			//如果{{$t('当前')}}{{$t('选择')}}{{$t('是')}}已经选{{$t('中')}}的，则{{$t('取消')}}选{{$t('中')}}
			if (this.selectedLength === length) {
				this.selectedLength = ''
				// 重新获取完整的车型列表
				await this.getVehicleTypes()
			} else {
				this.selectedLength = length
				// 获取关联的车型列表
				await this.getRelatedVehicles(length.id)
			}
		},

		// {{$t('选择')}}{{$t('车型')}}
		async selectType(type) {
			//如果{{$t('当前')}}{{$t('选择')}}{{$t('是')}}已经选{{$t('中')}}的，则{{$t('取消')}}选{{$t('中')}}
			if (this.selectedType === type) {
				this.selectedType = ''
				// 重新获取完整的车长列表
				await this.getCarLengths()
			} else {
				this.selectedType = type
				// 获取关联的{{$t('车长')}}{{$t('列表')}}
				if (type.id){
					await this.getRelatedSizes(type.id)
				}
			}
		},

		// {{$t('确认选择')}}
		submit() {

			//{{$t('铁路')}} {{$t('车皮')}} {{$t('尺寸')}} {{$t('箱型')}}
			if (this.$store.state.publishCommonBody.transport_way == 5) {
				if (!this.selectedPies || !this.selectedLength || !this.selectedType) {
					return uni.showToast({
						title: this.$t('请选择车皮、尺寸和箱型'),
						icon: 'none'
					})
				}
			}
			// 飞机 {{$t('机型')}}
			else if (this.$store.state.publishCommonBody.transport_way == 3) {
				console.log('this.selectedType-', this.selectedType)
				if (!this.selectedType) {
					return uni.showToast({
						title: this.$t('请选择机型'),
						icon: 'none'
					})
				}
			}
			//{{$t('汽运')}} {{$t('车长')}} {{$t('车型')}}
			else if (this.$store.state.publishCommonBody.transport_way == 2) {
				if (!this.selectedLength || !this.selectedType) {
					return uni.showToast({
						title: this.$t('请选择车长和车型'),
						icon: 'none'
					})
				}
			}
			//{{$t('海运')}} {{$t('车长')}} {{$t('箱型')}}
			else if (this.$store.state.publishCommonBody.transport_way == 4) {
				if (!this.selectedLength || !this.selectedType) {
					return uni.showToast({
						title: this.$t('请选择车长和箱型'),
						icon: 'none'
					})
				}
			}

			// 触发{{$t('确认')}}事{{$t('件')}}
			this.$emit('confirm', {
				railway_wagon: this.selectedPies,
				length: this.selectedLength,
				type: this.selectedType
			})
		},
		selectPies(pie) {
			this.selectedPies = pie
			this.$store.state.publishCommonBody.railway_wagon = pie.id
		}
	}
}

</script>

<template>
	<view class="h-full">
			<!-- <div style="height:50rpx"></div>
				<div class="header">
					<div class="back center" @click="back">
						<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
					</div>
					{{$t('载具类型')}}
				</div> -->
		<view class="p-30 h-full flex flex-col overflow-hidden" style="align-items: stretch;">
		<!-- {{ $store.state.publishCommonBody.transport_way }} -->

		<!-- 铁路情况 -->
		<div class="rounded-16 bg-white p-20" style="max-height: 50%;"
			v-if="$store.state.publishCommonBody.transport_way == 5">

			<div class="fz28 font-bold ml-10">{{$t('车皮')}}</div>

			<div class="skus">
				<div class="sku-item bg-gray-300 center" v-for="(item, index) in carPies" :key="index"
					:class="{ active: selectedPies.id === item.id }" @click="selectPies(item)">
					{{ item.title }}
				</div>
			</div>
			<u-empty :text="$t('暂无数据')" text-size="28" v-if="carLengths.length === 0" />
		</div>

		<!-- 飞机没长度 -->
		<div v-if="$store.state.publishCommonBody.transport_way != 3" class="rounded-16 bg-white p-20"
			style="max-height: 50%;">
			<!-- // 0不限 1其他 2汽运 3空运 4海运 5铁路 -->
			<div class="fz28 font-bold ml-10">
				<span v-if="$store.state.publishCommonBody.transport_way == 5">{{$t('尺寸')}} <span
						class="fz24 text-gray-500">（{{$t('集装箱')}}）</span> </span>
				<span v-else>{{$t('车长')}}</span>
			</div>

			<div class="skus">
				<div class="sku-item bg-gray-300 center" v-for="(item, index) in carLengths" :key="index"
					:class="{ active: selectedLength.id === item.id }" @click="selectLength(item)">
					{{ item.title }}
				</div>
			</div>
			<u-empty :text="$t('暂无数据')" text-size="28" v-if="carLengths.length === 0" />
		</div>

		<div class="rounded-16 bg-white p-20  mt-30 flex flex-col flex-1 overflow-hidden" style="align-items: stretch;">

			<div class="fz28 font-bold ml-10">
				<span v-if="$store.state.publishCommonBody.transport_way == 3">{{$t('机型')}}</span>
				<span
					v-else-if="$store.state.publishCommonBody.transport_way == 5 || $store.state.publishCommonBody.transport_way == 4">{{$t('箱型')}}</span>
				<span v-else>{{$t('车型')}}</span>
			</div>

			<div class="skus h-full" style="overflow-y: auto;">
				<template v-for="(item, index) in vehicleTypes">
					<div :class="{ active: selectedType.id === item.id }" class="sku-item bg-gray-300 center"
						v-if="item" @click="selectType(item)">
						{{ item.title }}
					</div>
				</template>

			</div>
			<u-empty text="暂无数据" text-size="28" v-if="vehicleTypes.length === 0" />


			<div class="center mt-50">
				<!-- 0不限 1其他 2汽运 3空运 4海运 5铁路 -->
				<image src="/static/pic/v1.png" mode="widthFix"
					v-if="$store.state.publishCommonBody.transport_way == deliveryType.qiyun" style="width: 400rpx;">
				</image>
				<image src="/static/pic/v2.png" mode="widthFix"
					v-if="$store.state.publishCommonBody.transport_way == deliveryType.haiyun" style="width: 400rpx;">
				</image>
				<image src="/static/pic/v3.png" mode="widthFix"
					v-if="$store.state.publishCommonBody.transport_way == deliveryType.kongyun" style="width: 400rpx;">
				</image>
			</div>
		</div>



		<div class="p-30 bg-white">
			<div class="submit center h-100 bg-primary text-white fz32 rounded-50" @click="submit">
				{{$t('确认')}}
			</div>
		</div>
	</view>
	</view>
</template>



<style>
.header {
	font-size: 34rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
	text-align: center;
	position: relative;
	padding-top: var(--status-bar-height);
}

.back {
	position: absolute;
	width: 70rpx;
	height: 70rpx;
	top: 18rpx;
}

.skus {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130rpx, 1fr));
	gap: 20rpx;
	margin-top: 20rpx;
	align-content: flex-start;
}

.sku-item {
	padding: 20rpx 15rpx;
	text-align: center;
	border-radius: 20rpx;
	background-color: #f9f9f9;
	font-size: 24rpx;
	cursor: pointer;
	transition: all 0.3s;
	border: 1rpx solid transparent;
	color: #1d1d1d;
}

.active {
	background-color: #D7E9FF;
	color: #278AFF;
	border: 1rpx solid #278AFF;
}

page {
	height: 100%;
	background-color: #F6F7FB;
}
</style>